<template>
	<view class="mains">
		<video id="myVideo" ref="videoAuto" :src="videoUrl" @pause="stopPlay" @play="starsPlay" @error="callback" :autoplay='autoplay' :controls='controls'></video>
		<view size="mini" @click="callback" class="btn-primary btn-foot">去预约</view>
	</view>
</template>

<script>
	import { getDataForIndex } from '@/service/index';
	export default {
		data() {
			return {
				videoUrl: '',
				top: '20px', // buttom位置
				controls:false, // 是否显示控件
				autoplay:true // 
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			stopPlay(){ // 隐藏视频播放控件
				this.controls = false
			},
			starsPlay(){ //  显示视频播放控件
				this.controls = true
			},
			getData() { // 获取商品数据
				getDataForIndex(0, 999).then(res => {
					uni.setStorageSync('indexDataInfo', res.data)
					this.videoUrl = res.data.vedios[0].image
					let info = uni.createSelectorQuery().select("#myVideo");
					info.boundingClientRect(rect => { //data - 各种参数
						let systemInfo = uni.getStorageSync('systemInfo');
						let windowHeight = systemInfo.windowHeight;
						// let windowWidth = systemInfo.windowWidth;
						// let ratio = 750 / windowWidth;
						// let height1 = windowHeight * ratio;
						// this.top = height1 - (height1 - rect.height) / 2
						this.top = windowHeight - 100
					}).exec()
				}).catch(err => {
					console.log(err)
				})
			},
			callback() { // 页面跳转
				uni.switchTab({url: '/pages/select/select'});
			}
		}
	}
</script>

<style>
	.mains{
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
	}
	#myVideo {
		width: 100vw;
		height: calc(100vh - 200rpx);
		overflow: hidden;
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		z-index: 1;
	}
	.btn-foot{
		position: absolute;
		z-index: 999;
		bottom: 0rpx;
	}
</style>
